<template>
    <div>
        <el-table
                :data="tableData"
                style="line-height:20px;"
                :cell-style="rowStyle"
                :header-cell-style="{'text-align':'center'}"
                :stripe="true">
            <el-table-column prop="orderno" label="订单编号" width="140"></el-table-column>
            <el-table-column prop="shopname" label="店铺名称" width="85"></el-table-column>
            <el-table-column prop="shopphone" label="店铺手机号" width="120"></el-table-column>
            <el-table-column prop="userName" label="收货人姓名" width="90"></el-table-column>
            <el-table-column prop="userphone" label="收货手机号"  width="120"></el-table-column>
            <el-table-column prop="useraddress" label="收货地址" width="130"></el-table-column>
            <el-table-column prop="dishtime" label="订单创建时间" width="160"></el-table-column>
            <el-table-column prop="gmtpayment" label="订单支付时间" width="160"></el-table-column>
            <el-table-column prop="state" label="订单状态" :formatter="realstate" width="130"></el-table-column>
            <el-table-column label="操作" fixed="right" width="230px">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="show(scope.row)">查看</el-button>
                    <el-button type="primary" size="mini" @click="pay(scope.row)" v-if="scope.row.state===1" >支付</el-button>
                    <el-button size="mini" type="danger" @click="updateStateByOrderNo5(scope.row)" v-if="scope.row.state===1">取消</el-button>
                    <el-button size="mini" type="success" @click="updateStateByOrderNo3(scope.row)" v-if="scope.row.state===2">使用</el-button>
                    <el-button size="mini" type="primary" @click="openAppraise(scope.row)" v-if="scope.row.state===3">评价</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)" v-if="scope.row.state!==1">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <div class="block" style="text-align: center">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="list1.length">
            </el-pagination>
        </div>
      <el-button :plain="true" @click="open2()" Style="display:none">成功</el-button>
      <el-button :plain="true" @click="open3()" Style="display:none">成功</el-button>
      <el-button :plain="true" @click="open4()" Style="display:none">成功</el-button>

      <el-dialog title="评价" :visible.sync="dialogAppraise" width="35%">
          <el-form :model="appraise" ref="appraiseForm" :rules="rules">
              <el-form-item label="订单号" :label-width="'120px'" style="text-align: left">
                  &nbsp;&nbsp;&nbsp;{{appraise.orderno}}
              </el-form-item>
              <el-form-item label="商家" :label-width="'120px'" style="text-align: left">
                  &nbsp;&nbsp;&nbsp;{{appraise.shopname}}
              </el-form-item>
              <el-form-item label="满意度" prop="score" :label-width="'120px'">
                      <el-rate
                          v-model="appraise.score"
                          :colors="colors"
                          show-text
                          :allow-half="true"
                          style="line-height: initial;margin: 10px;float: left">
                      </el-rate>
              </el-form-item>
              <el-form-item label="评价内容" :label-width="'120px'">
                  <el-input
                      type="textarea"
                      :autosize="{ minRows: 2, maxRows: 4}"
                      placeholder="请输入内容"
                      v-model="appraise.appraise">
                  </el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogAppraise = false;appraise = {}">取 消</el-button>
              <el-button type="primary" @click="onsubmitForm('appraiseForm')">确 定</el-button>
          </div>
      </el-dialog>

      <el-dialog title="查看订单" :visible.sync="dialogShow" width="35%" style="max-height: 700px">
          <el-descriptions class="margin-top" title="订单信息" :column="2" :size="'mini'" border>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-user"></i>
                      用户名
                  </template>
                  {{orderShow.userName}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-mobile-phone"></i>
                      手机号
                  </template>
                  {{orderShow.userphone}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="bi bi-shop-window"></i>
                      店家
                  </template>
                  {{orderShow.shopname}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-tickets"></i>
                      订单编号
                  </template>
                  {{orderShow.orderno}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-office-building"></i>
                      下单时间
                  </template>
                  {{orderShow.dishtime}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-office-building"></i>
                      送餐地址
                  </template>
                  {{orderShow.useraddress}}
              </el-descriptions-item>
          </el-descriptions>
          <div style="font-size: 16px;font-weight: 700;text-align: left;color: #333333;margin: 15px 0" class="clearfix">菜品</div>
          <el-row style="padding-bottom: 10px; border-bottom: 1px #545C64 solid">
              <el-col :span="8" style="text-align: center">
                  菜品名称
              </el-col>
              <el-col :span="8" style="text-align: center">
                  数量
              </el-col>
              <el-col :span="8" style="text-align: center">
                  菜品单价
              </el-col>
          </el-row>
          <div v-for="dish in showDish" style="max-height: 60px">
              <el-row style="margin: 5px">
                  <el-col :span="8" style="text-align: center">
                      {{dish.dishname}}
                  </el-col>
                  <el-col :span="8" style="text-align: center">
                      ×{{dish.number}}
                  </el-col>
                  <el-col :span="8" style="text-align: center">
                      {{dish.dishprice}}元/份
                  </el-col>
              </el-row>
          </div>
          <p style="text-align: right;margin-top: 20px">总计{{orderShow.orderTotalPrice}}元</p>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogShow = false;showDish = []">关闭</el-button>
          </div>
      </el-dialog>
    </div>
</template>

<script>
import order from "@/api/order";
export default {
  props:[
    'number'
  ],
  data(){
    return{
      list:[],
      goodList:[],
      tableData:[],
      list1:[],
      pageNum:1,
      dialogAppraise:false,
      appraise:{
          score:0
      },
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      rules:{
          score:{required:true,message:'请选择满意度',trigger:['blur'],pattern:/^(?!0$).*/}
      },
      dialogShow:false,
      showDish:[],
      orderShow:{}
    }
  },
  methods:{
    realstate(row){
      if(row.state===1){
        return '待支付'
      }else if(row.state===2){
        return '支付完成/待使用'
      }else if(row.state===3){
        return '已完成/待评价'
      }else if(row.state===4){
        return '评价已完成'
      }else if(row.state===5){
        return '订单已取消'
      }
    },
    rowStyle() {
      return "text-align:center";
    },
    open2() {
      this.$message({
        message: '删除成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '取消成功',
        type: 'success'
      });
    },
    open4() {
      this.$message({
        message: '已使用',
        type: 'success'
      });
    },
    findAllOrder(){
      const uid = sessionStorage.getItem("uid");
      order.findOneOrderByUid(uid).then((response)=>{
        this.list1 = response.data.data;
        this.tableData = this.list1.slice(this.pageNum-1,10)
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.tableData = this.list1.slice((this.pageNum-1)*10,this.pageNum*10)
    },
    handleDelete(row){
      order.updateUserStateByOrderNo(row.orderno).then((response)=>{
        if (response.data.data>0){
          this.open2();
          this.findAllOrder();
        }
      })
    },
    //评价  对该订单进行评价  前端需要传回订单评分及订单评价  以及订单编号   同时更新店铺的评价分   order.updateAppraise(orders).then((response)=>{})
    openAppraise(row){
        this.appraise = row;
        this.dialogAppraise = true;
    },
    findNoPay(){
        const uid = sessionStorage.getItem("uid");
        order.findAllStateByUid1(uid).then((response)=>{
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findFinish(){
        const uid = sessionStorage.getItem("uid");
        order.findAllStateByUid3(uid).then((response)=>{
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findApped(){
        const uid = sessionStorage.getItem("uid");
        order.findAllStateByUid4(uid).then((response)=>{
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    findCancel(){
        const uid = sessionStorage.getItem("uid");
        order.findAllStateByUid5(uid).then((response)=>{
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    updateStateByOrderNo3(row){
      order.updateStateByOrderNo3(row.orderno).then((response)=>{
        if (response.data.data>0){
          this.open4();
          this.findAllOrder();
        }
      })
    },
    updateStateByOrderNo5(row){
        order.updateStateByOrderNo5(row.orderno).then((response)=>{
            if (response.data.data>0){
                this.open3();
                this.findAllOrder();
            }
        })
    },
    findAllStateByUid2(){
        const uid = sessionStorage.getItem("uid");
        order.findAllStateByUid2(uid).then((response)=>{
            this.list1 = response.data.data;
            this.tableData = this.list1.slice(this.pageNum-1,10)
        })
    },
    pay(row){
      const subject = row.orderno;
      const traceNo = row.orderno;
      const totalAmount = row.ordertotalprice;
      window.open('http://localhost:8888/alipay/pay?subject='+subject+'&traceNo='+traceNo+'&totalAmount='+totalAmount)
    },
    choose(){
        switch (this.number){
            case 0:
                this.findAllOrder();
                break;
            case 1:
                this.findNoPay();
                break;
            case 2:
                this.findAllStateByUid2();
                break;
            case 3:
                this.findFinish();
                break;
            case 4:
                this.findApped();
                break;
            case 5:
                this.findCancel();
                break;
        }
    },
    onsubmitForm(formName){
      let that = this;
      console.log(this.appraise)
      this.$refs[formName].validate((valid)=>{
          if (valid){
              order.updateAppraise(that.appraise).then(response=>{
                  var num = response.data.data;
                  if (num>0){
                      that.$message({
                          message: '谢谢评价',
                          type: 'success'
                      });
                  }else{
                      that.$message({
                          message: '评价失败，请稍后尝试',
                          type: 'warning'
                      });
                  }
                  that.dialogAppraise = false;
                  that.appraise = {};
                  this.$router.replace({path:'empty2'})
              })
          }else{
              this.$message({
                  message: '评价失败，填写必填项',
                  type: 'warning'
              });
          }
      })
    },
    show(row){
        this.orderShow = row;
        console.log(this.orderShow)
        order.findByOrderNo(row.orderno).then(response=>{
            this.showDish = response.data.data;
            console.log(this.showDish)
        })
        this.dialogShow = true;
    },
  },
  created() {
    this.choose()
  },

}
</script>

<style scoped>
.image{
  width: 160px;
  height: 160px;
  border-radius: 4px;
}
.title{
  color: #606266
}
p{
  color: #606266;
  line-height: 30px;
}
.pdiv{
  position:absolute;
  bottom:0;
  line-height: 25px;
  font-size: 17px
}
.el-divider--horizontal{
  width: 80%;
  margin: 24px auto;
}
.el-input-number{
  margin-right: 20px;
  position: absolute;
  right: 30px;
  bottom: 10px;
}
::v-deep .el-table--fit{
    height: 463px;
}
::v-deep .el-table__body-wrapper{
    height: 414px;
}
</style>